<template>
  <el-dialog
    v-model="dialogVisible"
    title="批量上传学生信息"
    width="80%"
    top="5vh"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <div class="tab">
      <el-table :data="tableData" style="width: 100%" class="selecheck" v-loading="loading">
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="mobile" label="电话" width="180" />
        <el-table-column prop="classname" label="班级" />
        <el-table-column prop="username" label="账号" />
        <el-table-column prop="remarks" label="备注" />
        <el-table-column label="状态" width="110">
            <template #default="scope">
              <div v-if="scope.row.state==null">
                <el-icon><CircleCheckFilled style="color:#67c23a"/></el-icon>
              </div>
              <div v-if="scope.row.state!=null" class="ads">
                <el-icon><CircleCloseFilled style="color:#f56c6c;font-size:13px"/></el-icon>
                <span style="font-size:12px;color:#f56c6c">重新添加</span>
              </div>
            </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <div class="but">
          <div class="content">
            <span>全部：<span style="color: #000000">{{tableData.length}}</span></span>
            <span style="padding: 0px 22px"
              >成功：<span style="color: #72c749">202</span></span
            >
            <span>失败：<span style="color: #f57272">0</span></span>
          </div>
          <div>
            <el-button @click="complete">完成</el-button>
            <el-button type="primary" @click="exports">导出数据</el-button>
          </div>
        </div>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { inject, reactive, toRefs, watch } from "vue";
// 引入字体图标
import {CircleCheckFilled,CircleCloseFilled} from "@element-plus/icons-vue";
// 添加学生
import {setPass} from '../../apis/student/student'
const data = reactive({
  dialogVisible: false,
  tableData: [],
  loading:false,
});
const {dialogVisible, tableData,loading } = toRefs(data);
const datas: any = inject("data");
watch([datas], () => {
  dialogVisible.value = datas.stuShow;

});
const props = defineProps({
  list: {
    type: <any>Object,
  },
});
watch([props], () => {
  data.tableData = props.list;
});
// 关闭触发事件
const handleClose = (done: () => void) => {
  datas.stuShow = false;
  done();
};
// 导出数据
const exports = () => {
  alert("已导出");
};
// 完成
const datass:any = inject('data')
var num = 0
const setPassAdd=async (params:any)=>{
  const res:any = await setPass(params)
  if(res.errCode===10000){
    num = num+ 1
  }
  if(num!=data.tableData.length){
 datass.isShows = 2
  }

  if(num===data.tableData.length){
    datass.isShows = 1
  }
}
const complete = () => {
  const paramsAdd = data.tableData.map((item:any)=>({id:0,name:item.name,classid:item.classid,username:item.username,pass:item.pass}))
  paramsAdd.forEach((item:any)=>(setPassAdd(item)))
  datas.stuShow = false;
};
</script>
<style scoped lang="less">
@import url("../../static/css/student/BatchStuInfo.css");
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
